
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <script src="iconfont.js"></script>

    <style type="text/css">
        .icon {
          /* 通过设置 font-size 来改变图标大小 */
          width: 1em; height: 1em;
          /* 图标和文字相邻时，垂直对齐 */
          vertical-align: -0.15em;
          /* 通过设置 color 来改变 SVG 的颜色/fill */
          fill: currentColor;
          /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
             normalize.css 中也包含这行 */
          overflow: hidden;
        }

    </style>
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-friends"></use>
                    </svg>
                    <div class="name">朋友圈</div>
                    <div class="fontclass">#icon-friends</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-svgmoban59"></use>
                    </svg>
                    <div class="name">表白墙</div>
                    <div class="fontclass">#icon-svgmoban59</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-baihuo"></use>
                    </svg>
                    <div class="name">百货</div>
                    <div class="fontclass">#icon-baihuo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fushi"></use>
                    </svg>
                    <div class="name">服饰</div>
                    <div class="fontclass">#icon-fushi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shuma"></use>
                    </svg>
                    <div class="name">数码</div>
                    <div class="fontclass">#icon-shuma</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhaopin"></use>
                    </svg>
                    <div class="name">招聘</div>
                    <div class="fontclass">#icon-zhaopin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-down"></use>
                    </svg>
                    <div class="name">down</div>
                    <div class="fontclass">#icon-down</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-top"></use>
                    </svg>
                    <div class="name">top</div>
                    <div class="fontclass">#icon-top</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhucedenglushoujihao"></use>
                    </svg>
                    <div class="name">注册登录-手机号</div>
                    <div class="fontclass">#icon-zhucedenglushoujihao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qqkongjian"></use>
                    </svg>
                    <div class="name">QQ空间</div>
                    <div class="fontclass">#icon-qqkongjian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiedanjiluxian"></use>
                    </svg>
                    <div class="name">接单记录-线</div>
                    <div class="fontclass">#icon-jiedanjiluxian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xingxing"></use>
                    </svg>
                    <div class="name">星星</div>
                    <div class="fontclass">#icon-xingxing</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-iconfontmoreandroid"></use>
                    </svg>
                    <div class="name">更多(app)</div>
                    <div class="fontclass">#icon-iconfontmoreandroid</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wode1"></use>
                    </svg>
                    <div class="name">wode</div>
                    <div class="fontclass">#icon-wode1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fasmileo"></use>
                    </svg>
                    <div class="name">fa-smile-o</div>
                    <div class="fontclass">#icon-fasmileo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dingdanguanli"></use>
                    </svg>
                    <div class="name">订单管理</div>
                    <div class="fontclass">#icon-dingdanguanli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dingdan2"></use>
                    </svg>
                    <div class="name">订单</div>
                    <div class="fontclass">#icon-dingdan2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fenxiang"></use>
                    </svg>
                    <div class="name">分享</div>
                    <div class="fontclass">#icon-fenxiang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gouwuche-copy"></use>
                    </svg>
                    <div class="name">购物车</div>
                    <div class="fontclass">#icon-gouwuche-copy</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xinzeng1"></use>
                    </svg>
                    <div class="name">新增 (1)</div>
                    <div class="fontclass">#icon-xinzeng1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiahao"></use>
                    </svg>
                    <div class="name">ZS加号</div>
                    <div class="fontclass">#icon-jiahao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xinzeng"></use>
                    </svg>
                    <div class="name">新增</div>
                    <div class="fontclass">#icon-xinzeng</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-3lishi"></use>
                    </svg>
                    <div class="name">历史</div>
                    <div class="fontclass">#icon-3lishi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shengribirthday16"></use>
                    </svg>
                    <div class="name">生日_birthday16</div>
                    <div class="fontclass">#icon-shengribirthday16</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yanzhengma"></use>
                    </svg>
                    <div class="name">验证码</div>
                    <div class="fontclass">#icon-yanzhengma</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhengshu"></use>
                    </svg>
                    <div class="name">证书</div>
                    <div class="fontclass">#icon-zhengshu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yijiedan"></use>
                    </svg>
                    <div class="name">已接单</div>
                    <div class="fontclass">#icon-yijiedan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-quxiaodingdan"></use>
                    </svg>
                    <div class="name">分期－取消订单</div>
                    <div class="fontclass">#icon-quxiaodingdan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiaju"></use>
                    </svg>
                    <div class="name">家具</div>
                    <div class="fontclass">#icon-jiaju</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhucedenglumima"></use>
                    </svg>
                    <div class="name">注册登录-密码</div>
                    <div class="fontclass">#icon-zhucedenglumima</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiaguanzhu"></use>
                    </svg>
                    <div class="name">加关注</div>
                    <div class="fontclass">#icon-jiaguanzhu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-comment"></use>
                    </svg>
                    <div class="name">评论</div>
                    <div class="fontclass">#icon-comment</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye"></use>
                    </svg>
                    <div class="name">首页</div>
                    <div class="fontclass">#icon-shouye</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qiaquan1"></use>
                    </svg>
                    <div class="name">我的卡券</div>
                    <div class="fontclass">#icon-qiaquan1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-kefuzhongxin"></use>
                    </svg>
                    <div class="name">客服中心</div>
                    <div class="fontclass">#icon-kefuzhongxin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fanhui"></use>
                    </svg>
                    <div class="name">返回</div>
                    <div class="fontclass">#icon-fanhui</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dianzan"></use>
                    </svg>
                    <div class="name">点赞</div>
                    <div class="fontclass">#icon-dianzan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huati"></use>
                    </svg>
                    <div class="name">话题</div>
                    <div class="fontclass">#icon-huati</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-kecheng"></use>
                    </svg>
                    <div class="name">课程</div>
                    <div class="fontclass">#icon-kecheng</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-quxiao"></use>
                    </svg>
                    <div class="name">取消</div>
                    <div class="fontclass">#icon-quxiao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-ershoushebei"></use>
                    </svg>
                    <div class="name">二手设备</div>
                    <div class="fontclass">#icon-ershoushebei</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-renwujineng"></use>
                    </svg>
                    <div class="name">任务技能</div>
                    <div class="fontclass">#icon-renwujineng</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-remove"></use>
                    </svg>
                    <div class="name">remove</div>
                    <div class="fontclass">#icon-remove</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yulebagua"></use>
                    </svg>
                    <div class="name">娱乐八卦</div>
                    <div class="fontclass">#icon-yulebagua</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-Success"></use>
                    </svg>
                    <div class="name">同意</div>
                    <div class="fontclass">#icon-Success</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chuguofuwu"></use>
                    </svg>
                    <div class="name">出国服务</div>
                    <div class="fontclass">#icon-chuguofuwu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-buoumaotubiao14"></use>
                    </svg>
                    <div class="name">消息</div>
                    <div class="fontclass">#icon-buoumaotubiao14</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shiwuzhaoling"></use>
                    </svg>
                    <div class="name">失物招领</div>
                    <div class="fontclass">#icon-shiwuzhaoling</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouyejiedan"></use>
                    </svg>
                    <div class="name">首页 接单</div>
                    <div class="fontclass">#icon-shouyejiedan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiaguanzhu1"></use>
                    </svg>
                    <div class="name">加关注</div>
                    <div class="fontclass">#icon-jiaguanzhu1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-nan1"></use>
                    </svg>
                    <div class="name">男</div>
                    <div class="fontclass">#icon-nan1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon3"></use>
                    </svg>
                    <div class="name">iconfont_tiem</div>
                    <div class="fontclass">#icon-icon3</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chihewanle"></use>
                    </svg>
                    <div class="name">吃喝玩乐</div>
                    <div class="fontclass">#icon-chihewanle</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-weixin1"></use>
                    </svg>
                    <div class="name">微信</div>
                    <div class="fontclass">#icon-weixin1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sousuo"></use>
                    </svg>
                    <div class="name">搜索</div>
                    <div class="fontclass">#icon-sousuo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xingbienv"></use>
                    </svg>
                    <div class="name">性别女</div>
                    <div class="fontclass">#icon-xingbienv</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xingbienan"></use>
                    </svg>
                    <div class="name">性别男</div>
                    <div class="fontclass">#icon-xingbienan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shezhi"></use>
                    </svg>
                    <div class="name">设置</div>
                    <div class="fontclass">#icon-shezhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zengjiaanniu"></use>
                    </svg>
                    <div class="name">增加按钮</div>
                    <div class="fontclass">#icon-zengjiaanniu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fensi"></use>
                    </svg>
                    <div class="name">粉丝</div>
                    <div class="fontclass">#icon-fensi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xinjiantiezi"></use>
                    </svg>
                    <div class="name">新建帖子</div>
                    <div class="fontclass">#icon-xinjiantiezi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-maichu"></use>
                    </svg>
                    <div class="name">卖出</div>
                    <div class="fontclass">#icon-maichu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-lianxiwomen"></use>
                    </svg>
                    <div class="name">联系我们</div>
                    <div class="fontclass">#icon-lianxiwomen</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-biaoqing"></use>
                    </svg>
                    <div class="name">表情</div>
                    <div class="fontclass">#icon-biaoqing</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiala"></use>
                    </svg>
                    <div class="name">下拉</div>
                    <div class="fontclass">#icon-xiala</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-toupiao"></use>
                    </svg>
                    <div class="name">投票</div>
                    <div class="fontclass">#icon-toupiao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-plus-transfer"></use>
                    </svg>
                    <div class="name">转移</div>
                    <div class="fontclass">#icon-plus-transfer</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiaoxi"></use>
                    </svg>
                    <div class="name">消息</div>
                    <div class="fontclass">#icon-xiaoxi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zengjia"></use>
                    </svg>
                    <div class="name">增加</div>
                    <div class="fontclass">#icon-zengjia</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sixin"></use>
                    </svg>
                    <div class="name">私信</div>
                    <div class="fontclass">#icon-sixin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tiezi"></use>
                    </svg>
                    <div class="name">帖子</div>
                    <div class="fontclass">#icon-tiezi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dingdan3"></use>
                    </svg>
                    <div class="name">订单</div>
                    <div class="fontclass">#icon-dingdan3</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gengduo2"></use>
                    </svg>
                    <div class="name">更多</div>
                    <div class="fontclass">#icon-gengduo2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yiguanzhu"></use>
                    </svg>
                    <div class="name">已关注</div>
                    <div class="fontclass">#icon-yiguanzhu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-finish"></use>
                    </svg>
                    <div class="name">对号</div>
                    <div class="fontclass">#icon-finish</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shoucang"></use>
                    </svg>
                    <div class="name">收藏 (1)</div>
                    <div class="fontclass">#icon-shoucang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wode"></use>
                    </svg>
                    <div class="name">我的</div>
                    <div class="fontclass">#icon-wode</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dingdanyiwancheng"></use>
                    </svg>
                    <div class="name">订单已完成</div>
                    <div class="fontclass">#icon-dingdanyiwancheng</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qiangdan"></use>
                    </svg>
                    <div class="name">抢单1</div>
                    <div class="fontclass">#icon-qiangdan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shanchu"></use>
                    </svg>
                    <div class="name">删除 (1)</div>
                    <div class="fontclass">#icon-shanchu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-paotui"></use>
                    </svg>
                    <div class="name">跑腿</div>
                    <div class="fontclass">#icon-paotui</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tupian"></use>
                    </svg>
                    <div class="name">图片</div>
                    <div class="fontclass">#icon-tupian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-weixin"></use>
                    </svg>
                    <div class="name">微信</div>
                    <div class="fontclass">#icon-weixin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-start"></use>
                    </svg>
                    <div class="name">start</div>
                    <div class="fontclass">#icon-start</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-web-icon-"></use>
                    </svg>
                    <div class="name">转发</div>
                    <div class="fontclass">#icon-web-icon-</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-remen"></use>
                    </svg>
                    <div class="name">热门</div>
                    <div class="fontclass">#icon-remen</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-nan"></use>
                    </svg>
                    <div class="name">男</div>
                    <div class="fontclass">#icon-nan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huodong"></use>
                    </svg>
                    <div class="name">活动</div>
                    <div class="fontclass">#icon-huodong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-innovate"></use>
                    </svg>
                    <div class="name">创新创业</div>
                    <div class="fontclass">#icon-innovate</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yifachuyijiedankaishipeisong"></use>
                    </svg>
                    <div class="name">已发出／已接单／开始配送</div>
                    <div class="fontclass">#icon-yifachuyijiedankaishipeisong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-c_icon_nv"></use>
                    </svg>
                    <div class="name">c_icon_nv1</div>
                    <div class="fontclass">#icon-c_icon_nv</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-c_icon_nan"></use>
                    </svg>
                    <div class="name">c_icon_nan1</div>
                    <div class="fontclass">#icon-c_icon_nan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-guanzhu"></use>
                    </svg>
                    <div class="name">关注</div>
                    <div class="fontclass">#icon-guanzhu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tiezi1"></use>
                    </svg>
                    <div class="name">帖子</div>
                    <div class="fontclass">#icon-tiezi1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chihewanle1"></use>
                    </svg>
                    <div class="name">吃喝玩乐</div>
                    <div class="fontclass">#icon-chihewanle1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-toupiao1"></use>
                    </svg>
                    <div class="name">投票</div>
                    <div class="fontclass">#icon-toupiao1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-yijiedan"></use>
                    </svg>
                    <div class="name">icon-已接单</div>
                    <div class="fontclass">#icon-icon-yijiedan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-ershoushebei1"></use>
                    </svg>
                    <div class="name">二手设备</div>
                    <div class="fontclass">#icon-ershoushebei1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-remen1"></use>
                    </svg>
                    <div class="name">热门</div>
                    <div class="fontclass">#icon-remen1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-kaoshi"></use>
                    </svg>
                    <div class="name">考试</div>
                    <div class="fontclass">#icon-kaoshi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chihewanle2"></use>
                    </svg>
                    <div class="name">吃喝玩乐</div>
                    <div class="fontclass">#icon-chihewanle2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huodong1"></use>
                    </svg>
                    <div class="name">活动</div>
                    <div class="fontclass">#icon-huodong1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yueTAtianchong"></use>
                    </svg>
                    <div class="name">约TA填充</div>
                    <div class="fontclass">#icon-yueTAtianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qianbao1"></use>
                    </svg>
                    <div class="name">钱包</div>
                    <div class="fontclass">#icon-qianbao1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhaopinhui"></use>
                    </svg>
                    <div class="name">招聘会2</div>
                    <div class="fontclass">#icon-zhaopinhui</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiaoyuanluntan"></use>
                    </svg>
                    <div class="name">校园论坛</div>
                    <div class="fontclass">#icon-xiaoyuanluntan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qizhi"></use>
                    </svg>
                    <div class="name">旗帜</div>
                    <div class="fontclass">#icon-qizhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fabu-tiezi"></use>
                    </svg>
                    <div class="name">发帖子</div>
                    <div class="fontclass">#icon-fabu-tiezi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-toupiao2"></use>
                    </svg>
                    <div class="name">投票</div>
                    <div class="fontclass">#icon-toupiao2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yuyan1"></use>
                    </svg>
                    <div class="name">语言</div>
                    <div class="fontclass">#icon-yuyan1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fasong"></use>
                    </svg>
                    <div class="name">发送</div>
                    <div class="fontclass">#icon-fasong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gengduo"></use>
                    </svg>
                    <div class="name">更多</div>
                    <div class="fontclass">#icon-gengduo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dianzan1"></use>
                    </svg>
                    <div class="name">点赞</div>
                    <div class="fontclass">#icon-dianzan1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huahanAPP-icon--"></use>
                    </svg>
                    <div class="name">八卦热议</div>
                    <div class="fontclass">#icon-huahanAPP-icon--</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dianfu"></use>
                    </svg>
                    <div class="name">垫付</div>
                    <div class="fontclass">#icon-dianfu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-soutiezi"></use>
                    </svg>
                    <div class="name">搜帖子</div>
                    <div class="fontclass">#icon-soutiezi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tiezi2"></use>
                    </svg>
                    <div class="name">帖子</div>
                    <div class="fontclass">#icon-tiezi2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qita"></use>
                    </svg>
                    <div class="name">其他</div>
                    <div class="fontclass">#icon-qita</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qiaquan"></use>
                    </svg>
                    <div class="name">卡券</div>
                    <div class="fontclass">#icon-qiaquan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qq"></use>
                    </svg>
                    <div class="name">qq</div>
                    <div class="fontclass">#icon-qq</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-quxiaoguanzhu"></use>
                    </svg>
                    <div class="name">取消关注</div>
                    <div class="fontclass">#icon-quxiaoguanzhu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-plus"></use>
                    </svg>
                    <div class="name">plus</div>
                    <div class="fontclass">#icon-plus</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jifen"></use>
                    </svg>
                    <div class="name">积分</div>
                    <div class="fontclass">#icon-jifen</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dianzan2"></use>
                    </svg>
                    <div class="name">点赞</div>
                    <div class="fontclass">#icon-dianzan2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yuehui-mian"></use>
                    </svg>
                    <div class="name">约会-面</div>
                    <div class="fontclass">#icon-yuehui-mian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-toupiao3"></use>
                    </svg>
                    <div class="name">投票</div>
                    <div class="fontclass">#icon-toupiao3</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dingdan1"></use>
                    </svg>
                    <div class="name">订单</div>
                    <div class="fontclass">#icon-dingdan1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-paobu"></use>
                    </svg>
                    <div class="name">跑步</div>
                    <div class="fontclass">#icon-paobu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jinshouzhi"></use>
                    </svg>
                    <div class="name">金手指</div>
                    <div class="fontclass">#icon-jinshouzhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gexinghuapingtaitubiaoyihuifu-"></use>
                    </svg>
                    <div class="name">安卓下载</div>
                    <div class="fontclass">#icon-gexinghuapingtaitubiaoyihuifu-</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-hua"></use>
                    </svg>
                    <div class="name">花</div>
                    <div class="fontclass">#icon-hua</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huodong2"></use>
                    </svg>
                    <div class="name">活动</div>
                    <div class="fontclass">#icon-huodong2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qiandao1"></use>
                    </svg>
                    <div class="name">签到</div>
                    <div class="fontclass">#icon-qiandao1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sousuo1"></use>
                    </svg>
                    <div class="name">搜索</div>
                    <div class="fontclass">#icon-sousuo1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-meiguihua"></use>
                    </svg>
                    <div class="name">玫瑰花 (1)</div>
                    <div class="fontclass">#icon-meiguihua</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yue"></use>
                    </svg>
                    <div class="name">约</div>
                    <div class="fontclass">#icon-yue</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhiding"></use>
                    </svg>
                    <div class="name">置顶</div>
                    <div class="fontclass">#icon-zhiding</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shuji-"></use>
                    </svg>
                    <div class="name">书籍</div>
                    <div class="fontclass">#icon-shuji-</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tubiaoheji-"></use>
                    </svg>
                    <div class="name">考研</div>
                    <div class="fontclass">#icon-tubiaoheji-</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tubiaoheji-1"></use>
                    </svg>
                    <div class="name">资讯</div>
                    <div class="fontclass">#icon-tubiaoheji-1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-paobu1"></use>
                    </svg>
                    <div class="name">跑步</div>
                    <div class="fontclass">#icon-paobu1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qianbao"></use>
                    </svg>
                    <div class="name">钱包</div>
                    <div class="fontclass">#icon-qianbao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-pingguoxiazai"></use>
                    </svg>
                    <div class="name">苹果下载</div>
                    <div class="fontclass">#icon-pingguoxiazai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiaoxi-wodeguanzhu"></use>
                    </svg>
                    <div class="name">消息-我的关注</div>
                    <div class="fontclass">#icon-xiaoxi-wodeguanzhu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yue1"></use>
                    </svg>
                    <div class="name">约</div>
                    <div class="fontclass">#icon-yue1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zengjia-yuan-tianchong"></use>
                    </svg>
                    <div class="name">增加-圆-填充</div>
                    <div class="fontclass">#icon-zengjia-yuan-tianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xingmingyonghumingnicheng"></use>
                    </svg>
                    <div class="name">姓名 用户名 昵称</div>
                    <div class="fontclass">#icon-xingmingyonghumingnicheng</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qiandao"></use>
                    </svg>
                    <div class="name">签到</div>
                    <div class="fontclass">#icon-qiandao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-choujiang"></use>
                    </svg>
                    <div class="name">抽奖</div>
                    <div class="fontclass">#icon-choujiang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yingyong"></use>
                    </svg>
                    <div class="name">应用</div>
                    <div class="fontclass">#icon-yingyong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-check-circle"></use>
                    </svg>
                    <div class="name">check-circle</div>
                    <div class="fontclass">#icon-check-circle</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-kaishi"></use>
                    </svg>
                    <div class="name">开始</div>
                    <div class="fontclass">#icon-kaishi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gengduo1"></use>
                    </svg>
                    <div class="name">更多</div>
                    <div class="fontclass">#icon-gengduo1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-ellipse"></use>
                    </svg>
                    <div class="name">ellipse</div>
                    <div class="fontclass">#icon-ellipse</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-back"></use>
                    </svg>
                    <div class="name">back</div>
                    <div class="fontclass">#icon-back</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-home_ico_like-"></use>
                    </svg>
                    <div class="name">like</div>
                    <div class="fontclass">#icon-home_ico_like-</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-nv"></use>
                    </svg>
                    <div class="name">女</div>
                    <div class="fontclass">#icon-nv</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zengjia-fill"></use>
                    </svg>
                    <div class="name">增加-fill</div>
                    <div class="fontclass">#icon-zengjia-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-hua1"></use>
                    </svg>
                    <div class="name">花 (19)</div>
                    <div class="fontclass">#icon-hua1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jineng"></use>
                    </svg>
                    <div class="name">技能</div>
                    <div class="fontclass">#icon-jineng</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fasong1"></use>
                    </svg>
                    <div class="name">发送</div>
                    <div class="fontclass">#icon-fasong1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-kaiguananniu"></use>
                    </svg>
                    <div class="name">开关按钮</div>
                    <div class="fontclass">#icon-kaiguananniu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zengjia1"></use>
                    </svg>
                    <div class="name">增加</div>
                    <div class="fontclass">#icon-zengjia1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhifeiji"></use>
                    </svg>
                    <div class="name">发送</div>
                    <div class="fontclass">#icon-zhifeiji</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shejiaoqq"></use>
                    </svg>
                    <div class="name">社交qq</div>
                    <div class="fontclass">#icon-shejiaoqq</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-daijinjuanguanli"></use>
                    </svg>
                    <div class="name">代金劵管理</div>
                    <div class="fontclass">#icon-daijinjuanguanli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-kaquan"></use>
                    </svg>
                    <div class="name">卡券</div>
                    <div class="fontclass">#icon-kaquan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-nv1"></use>
                    </svg>
                    <div class="name">女</div>
                    <div class="fontclass">#icon-nv1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dingdan"></use>
                    </svg>
                    <div class="name">订单</div>
                    <div class="fontclass">#icon-dingdan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-meizhuang"></use>
                    </svg>
                    <div class="name">美妆</div>
                    <div class="fontclass">#icon-meizhuang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-index-active"></use>
                    </svg>
                    <div class="name">等级</div>
                    <div class="fontclass">#icon-index-active</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-level-3"></use>
                    </svg>
                    <div class="name">等级</div>
                    <div class="fontclass">#icon-level-3</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-level-4"></use>
                    </svg>
                    <div class="name">等级</div>
                    <div class="fontclass">#icon-level-4</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-level-6"></use>
                    </svg>
                    <div class="name">等级</div>
                    <div class="fontclass">#icon-level-6</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wode2"></use>
                    </svg>
                    <div class="name">wode</div>
                    <div class="fontclass">#icon-wode2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-right"></use>
                    </svg>
                    <div class="name">right</div>
                    <div class="fontclass">#icon-right</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-message"></use>
                    </svg>
                    <div class="name">message</div>
                    <div class="fontclass">#icon-message</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye1"></use>
                    </svg>
                    <div class="name">首页</div>
                    <div class="fontclass">#icon-shouye1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-ershou"></use>
                    </svg>
                    <div class="name">二手</div>
                    <div class="fontclass">#icon-ershou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fensi1"></use>
                    </svg>
                    <div class="name">粉丝</div>
                    <div class="fontclass">#icon-fensi1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yuyan"></use>
                    </svg>
                    <div class="name">语言</div>
                    <div class="fontclass">#icon-yuyan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-partjob"></use>
                    </svg>
                    <div class="name">兼职</div>
                    <div class="fontclass">#icon-partjob</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-renzheng1"></use>
                    </svg>
                    <div class="name">认证</div>
                    <div class="fontclass">#icon-renzheng1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zengjia-cuxiantiao-fill"></use>
                    </svg>
                    <div class="name">增加-粗线条-fill</div>
                    <div class="fontclass">#icon-zengjia-cuxiantiao-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-ershoujishi"></use>
                    </svg>
                    <div class="name">二手集市</div>
                    <div class="fontclass">#icon-ershoujishi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-aiqingyulangman-"></use>
                    </svg>
                    <div class="name">爱情与浪漫-3</div>
                    <div class="fontclass">#icon-aiqingyulangman-</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-aiqingyulangman-1"></use>
                    </svg>
                    <div class="name">爱情与浪漫-6</div>
                    <div class="fontclass">#icon-aiqingyulangman-1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-aiqingyulangman-2"></use>
                    </svg>
                    <div class="name">爱情与浪漫-5</div>
                    <div class="fontclass">#icon-aiqingyulangman-2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-ershoumaimai"></use>
                    </svg>
                    <div class="name">二手买卖</div>
                    <div class="fontclass">#icon-ershoumaimai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shangchuanzhaopian1"></use>
                    </svg>
                    <div class="name">上传照片</div>
                    <div class="fontclass">#icon-shangchuanzhaopian1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wodedangxuan"></use>
                    </svg>
                    <div class="name">我 的</div>
                    <div class="fontclass">#icon-wodedangxuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-riqi"></use>
                    </svg>
                    <div class="name">日期</div>
                    <div class="fontclass">#icon-riqi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wodedangxuan3"></use>
                    </svg>
                    <div class="name">我 的</div>
                    <div class="fontclass">#icon-wodedangxuan3</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wodedangxuan1"></use>
                    </svg>
                    <div class="name">我 的</div>
                    <div class="fontclass">#icon-wodedangxuan1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wodedangxuan2"></use>
                    </svg>
                    <div class="name">我 的</div>
                    <div class="fontclass">#icon-wodedangxuan2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-weixinpengyouquan"></use>
                    </svg>
                    <div class="name">微信朋友圈</div>
                    <div class="fontclass">#icon-weixinpengyouquan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-QQkongjian"></use>
                    </svg>
                    <div class="name">QQ空间</div>
                    <div class="fontclass">#icon-QQkongjian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-meiyouxiangguan"></use>
                    </svg>
                    <div class="name">没有相关</div>
                    <div class="fontclass">#icon-meiyouxiangguan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhuanpantubiao_xiexiecanyu"></use>
                    </svg>
                    <div class="name">转盘图标_谢谢参与</div>
                    <div class="fontclass">#icon-zhuanpantubiao_xiexiecanyu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jifen1"></use>
                    </svg>
                    <div class="name">积分</div>
                    <div class="fontclass">#icon-jifen1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-test1"></use>
                    </svg>
                    <div class="name">3</div>
                    <div class="fontclass">#icon-icon-test1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-test"></use>
                    </svg>
                    <div class="name">2</div>
                    <div class="fontclass">#icon-icon-test</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-test2"></use>
                    </svg>
                    <div class="name">1</div>
                    <div class="fontclass">#icon-icon-test2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouyeshixin"></use>
                    </svg>
                    <div class="name">首页实心</div>
                    <div class="fontclass">#icon-shouyeshixin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-remen-copy"></use>
                    </svg>
                    <div class="name">热门</div>
                    <div class="fontclass">#icon-remen-copy</div>
                </li>
            
        </ul>


        <h2 id="symbol-">symbol引用</h2>
        <hr>

        <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
        这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：</p>
        <ul>
          <li>支持多色图标了，不再受单色限制。</li>
          <li>通过一些技巧，支持像字体那样，通过<code>font-size</code>,<code>color</code>来调整样式。</li>
          <li>兼容性较差，支持 ie9+,及现代浏览器。</li>
          <li>浏览器渲染svg的性能一般，还不如png。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-symbol-">第一步：引入项目下面生成的symbol代码：</h3>
        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;</span></code></pre>
        <h3 id="-css-">第二步：加入通用css代码（引入一次就行）：</h3>
        <pre><code class="lang-js hljs javascript">&lt;style type=<span class="hljs-string">"text/css"</span>&gt;
.icon {
   width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em;
   vertical-align: <span class="hljs-number">-0.15</span>em;
   fill: currentColor;
   overflow: hidden;
}
&lt;<span class="hljs-regexp">/style&gt;</span></code></pre>
        <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-js hljs javascript">&lt;svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>&gt;<span class="xml"><span class="hljs-tag">
  &lt;<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
</span>&lt;<span class="hljs-regexp">/svg&gt;
        </span></code></pre>
    </div>
</body>
</html>
